<template>
  <h1>vue组件通讯方式有哪些？</h1>
  <h2>父子组件通讯</h2>
  <ul>
    <li class="list-item" v-for="(item, index) in list1" :key="index">
      <p>{{item}}</p>
    </li>
  </ul>
  <h2>跨组件通讯</h2>
  <ul>
    <li class="list-item" v-for="(item, index) in list2" :key="index">
      <p>{{item}}</p>
    </li>
  </ul>
</template>
<script lang="ts" setup>
import { shallowRef } from "vue";

const list1 = shallowRef([
  "父组件通过props向子组件传递数据",
  "子组件通过$emit向父组件发送事件，并可以传递数据",
  "获取组件实例对象，调用属性火方法：vue2:通过this.$parent获取父组件实例，或通过this.$children获取子组件实例。vue3通过ref引用子组件，直接访问其属性和方法",
  "vue3组件支持多个v-model绑定自定义属性名，父子之间的双向绑定更加灵活",
]);

const list2 = shallowRef([
  'Provide / Inject：父组件通过 provide 向后代组件传递数据，后代组件使用 inject 接收数据，适用于深层嵌套组件间的通信。',
  'vuex：通过全局状态管理库 Vuex 共享状态，实现跨组件通信（vue2）。',
  'pinia：Pinia 是 Vue 3 推荐的全局状态管理库，替代了 Vuex。',
  '事件总线（Vue 2）：Vue 2 中可以通过Event Bus实现组件间的通信，但在 Vue 3 中不推荐使用。',
  '全局事件处理器：通过在根组件$root或全局对象上监听事件，进行跨组件通信（Vue 3 推荐使用外部库，如 mitt）。'
])
</script>
